<!-- 
    CSS:
        Cascading Style Sheet 层叠样式表

    有三种写法：
        1）行内样式  在html的开始标签中写一个style属性，样式写在style属性值中
        2）内部样式  在head标签内部，title标签下面，创建一个style标签，样式写在style标签中
        3）外部样式  在外面创建一个css文件，样式写在css文件中，在html文件中通过link引入

    CSS中的注释：
        /*    */      和JS中的注释是一样

    CSS中的选择器：
        1）通用选择器  通配符选择器  *
        2）元素选择器   选中网页中的一类标签     不管层次有多深，都可以选中
        3）类选择器   
            第一步：给元素起名字  
                可以给多个不同标签起相同的名字  
                也可以给一个标签，起不同的名字
                名字由数字，字符，下划线，中划线组成，不要以数字和中划线打头
                这个名字类似于姓名  姓名可以重复
                class可以写在任何标签上
            第二步：在style标签中，通过 .className 就可以选中了
        4）ID选择器
            第一步：给元素起名字
                通过ID起的名字，需要唯一，类似于身份证号
                id也可以写在任何标签上
            第二步：在stle标签中，通过 #idName 就可以选中了
        5）属性选择器
            [title] 选中标签中有title属性的元素
            [title="abc"] 选中标签中有title属性的元素，并且属性值就是abc
            ---------------
            [title*="abc"]  属性值中需要包含abc
            [title^="abc"]  属性值需要以abc打头
            [title$="abc"]  属性值需要以abc结尾 
            [title|="abc"]  属性值是abc 或 以 abc-打头
            [title~="abc"]  属性值是有abc，abc是独立的    <div title="abc def"></div>
        6）后代选择器
            A）后代选择器   div p
            B）儿子选择器   div>p
        7）兄弟选择器
            A）+  后面紧挨着的一个兄弟
            B）~  后面的所有兄弟
        8）交集选择器
            div.box    选中div并且div中有一个class="box"
        9）并集选择器
            div, h1, p, li, .item
        10）伪类选择器
            :hover    当鼠标去摸的时候的状态
 -->